/**
自定义的Card组件

属性：
  title:String： 标题
  icon:String： 默认值"el-icon-document" 标题图标
  bodyStyle:Object: Card主体的样式
  bodyClass:String: Card主体的ClassName
  titleStyle:Object:Card标题的样式
  titleClass:String: Card标题的ClassName
 */
<template>
  <div class="card">
    <div v-if="title" :class="titleClass" :style="titleStyle">
      <div class="text">
        <i :class="icon" />
        <span>{{title}}</span>
      </div>
      <div class="more">
        <slot name="more" />
      </div>
    </div>
    <div :class="bodyClass" :style="bodyStyle">
      <slot/>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    title:String,
    icon:{type:String,default:"el-icon-document"},
    bodyStyle:Object,
    bodyClass:{type:String,default:'card-body'},
    titleStyle:Object,
    titleClass:{type:String,default:'card-title'}
  }
}
</script>

<style lang="less" scoped>
.card{
  background-color: #fff;
  border: 1px solid #ececec;
  border-radius: 3px;
  .card-title {
    font-size: 14px;
    font-weight: bold;
    color:#4590BF;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #ecf5ff;
    height:40px;
    line-height: 40px;
    border-radius: 3px 3px 0px 0px;
    display: flex;
    .text {
      justify-content: left;
      width:100%;
      text-align: left;
      i{
        margin-right: 10px;
      }
    }
    .more {
      justify-content: right;
      width:100%;
      text-align:right;
      padding:4px 0px 4px 0px;
      line-height: 30px;
      a {
        line-height: 16px;
        margin-right: 10px;
      }
      button {
        margin-right: 10px;
      }
    }
    
  }
  .card-body {
    padding:10px;
    border-radius: 0px 0px 3px 3px;
  }
}
</style>